<template>
  <div class="brand">
    <!-- <Left-menus active="2"></Left-menus>
    <div class="brand-main">
      <h1>品牌商管理</h1>
      <div class="list">
        <div class="head my-btn">
          <el-button @click="addDet('-1')">添加品牌商</el-button>
          <el-input placeholder="输入品牌商名称搜索" v-model="shopName">
            <i slot="prefix" class="el-input__icon el-icon-search search"></i>
          </el-input>
        </div>
        <div class="content">
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="date" label="品牌商名称">
              <template slot-scope="scope">
                <el-select v-model="scope.row.no" placeholder="请选择">
                  <el-option label="1" value="1"></el-option>
                  <el-option label="2" value="2"></el-option>
                  <el-option label="3" value="3"></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column prop="date" label="品牌商名称">
              <template slot-scope="scope">
                <el-input v-if="scope.row.no==='1'" placeholder="xxxxx" v-model="scope.row.no1"></el-input>
                <el-upload
                  v-if="scope.row.no==='2'"
                  class="avatar-uploader"
                  :action="BASE_URL"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload"
                  name="myFileName"
                >
                  <img v-if="companyForm.imgurl" :src="companyForm.imgurl" class="avatar" />
                  <div v-else class="upimg">
                    <i class="el-icon-plus avatar-uploader-icon">
                      <span>上传</span>
                    </i>
                  </div>
                </el-upload>
                <Sy-Vedio @childFn="parentFn" v-if="scope.row.no==='3'"></Sy-Vedio>
                <span v-else>3333</span>
              </template>
            </el-table-column>
            <el-table-column prop="date" label="品牌商名称"></el-table-column>
            <el-table-column prop="name" label="商品标识码"></el-table-column>
            <el-table-column prop="address" label="备注"></el-table-column>
            <el-table-column label="所属企业">
              <template slot-scope="scope">
                <div class="my-btn">
                  <span v-if="scope.row.qiye">{{scope.row.qiye}}</span>
                  <el-button
                    v-else
                    style="width:auto;padding:5px 10px;"
                    @click="dialogVisible = true"
                  >去添加</el-button>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <div class="operat">
                  <el-button type="text" style="color:#76d4ce;">查看商品{{scope.row.no}}</el-button>
                  <el-button type="text" style="color:#76d4ce;" @click="addDet(scope.row)">编辑</el-button>
                  <el-popconfirm
                    confirmButtonText="删除"
                    cancelButtonText="取消"
                    :title="text"
                    hideIcon
                    cancelButtonType="default"
                    @onConfirm="deletion"
                  >
                    <el-button type="text" style="color:#76d4ce;marginLeft:10px" slot="reference">删除</el-button>
                  </el-popconfirm>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            class="paging"
            align="right"
            @current-change="handleCurrentChange"
            :current-page.sync="curPage"
            hide-on-single-page
            :page-size="pageSize"
            layout="prev, pager, next, jumper"
            :total="count"
          ></el-pagination>
        </div>
      </div>
    </div>
    <el-dialog title="添加所属企业" :visible.sync="dialogVisible" width="30%" class="company">
      <span>
        <div class="enterprise">
          <p>企业名称：</p>
          <el-input v-model="companyForm.name" placeholder="请输入企业名称"></el-input>
        </div>
        <div class="enterprise">
          <p>信用代码：</p>
          <el-input v-model="companyForm.code" placeholder="请输入信用代码"></el-input>
        </div>
        <div class="enterprise">
          <p>法人：</p>
          <el-input v-model="companyForm.legal" placeholder="请输入法人"></el-input>
        </div>
        <div class="enterprise">
          <p>证件号：</p>
          <el-input v-model="companyForm.number" placeholder="请输入证件号"></el-input>
        </div>
        <div class="enterprise">
          <p>联系方式：</p>
          <el-input v-model="companyForm.phone" placeholder="请输入联系方式"></el-input>
        </div>
        <div class="enterprise">
          <p>营业执照：</p>
          <div class="contentFirst-img">
            <el-upload
              class="avatar-uploader"
              :action="BASE_URL"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
              name="myFileName"
            >
              <img v-if="companyForm.imgurl" :src="companyForm.imgurl" class="avatar" />
              <div v-else class="upimg">
                <i class="el-icon-plus avatar-uploader-icon">
                  <span>上传</span>
                </i>
              </div>
            </el-upload>
          </div>
        </div>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="添加品牌商" :visible.sync="dialogVisible1" width="30%" class="brandDia company">
      <span>
        <div>
          <p>品牌商名称</p>
          <el-input v-model="brandForm.date" placeholder="请输入品牌商名称"></el-input>
          <p>备注：</p>
          <el-input
            v-model="brandForm.address"
            placeholder="请输入备注"
            type="textarea"
            :autosize="{ minRows:6, maxRows: 8}"
          ></el-input>
        </div>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible1 = false">确 定</el-button>
      </span>
    </el-dialog>
    <div class="el-dialog__wrapper company exhibition" style="z-index: 2016;" v-if="dialogVisible2">
      <div
        role="dialog"
        aria-modal="true"
        aria-label="环节配置"
        class="el-dialog"
        style="margin-top: 15vh; width: 414px;"
      >
        <div class="exhibition-H5"></div>
      </div>
      <div
        role="dialog"
        aria-modal="true"
        aria-label="环节配置"
        class="el-dialog"
        style="margin-top: 15vh; width: 552px;"
      >
        <div class="el-dialog__header">
          <span class="el-dialog__title">溯源展示配置</span>
          <button type="button" aria-label="Close" class="el-dialog__headerbtn">
            <i class="el-dialog__close el-icon el-icon-close"></i>
          </button>
        </div>
        <div class="el-dialog__body">
          <div class="confi-title">
            <p>展示全部</p>
            <el-switch v-model="aaa" active-color="#13ce66" inactive-color="#ddd"></el-switch>
          </div>
          <div class="confi-main">
            <div class="confi-content" v-for="(item,index) in bageList" :key="index">
              <div class="confi-content_head">
                <span>{{item.title}}</span>
                <i class="el-icon-arrow-down"></i>
              </div>
              <div class="confi-content_dispaly">
                <div
                  class="confi-content_dispalyF"
                  style="justifyContent:flex-start;align-items: flex-start;"
                  v-if="item.banner"
                >
                  <p>头部banner</p>
                  <el-upload
                    class="avatar-uploader"
                    :action="BASE_URL"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload"
                    name="myFileName"
                  >
                    <img v-if="item.banner" :src="item.banner" class="avatar" width="100" />
                    <div v-else class="upimg">
                      <i class="el-icon-plus avatar-uploader-icon"></i>
                    </div>
                  </el-upload>
                </div>
                <div class="confi-content_dispalyF" v-for="(t,i) in item.children" :key="i">
                  <p>{{t.name}}</p>
                  <el-input v-model="t.value" v-if="t.name=='首次查询提示'||t.name=='多次查询提示'"></el-input>
                  <el-switch
                    v-model="t.state"
                    active-color="#13ce66"
                    inactive-color="#ddd"
                    @change="changeState(index,i)"
                  ></el-switch>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="el-dialog__footer">
          <span class="dialog-footer">
            <button type="button" class="el-button el-button--default">
              <span>取 消</span>
            </button>
            <button type="button" class="el-button el-button--primary">
              <span>下一步</span>
            </button>
          </span>
        </div>
      </div>
    </div> -->
  </div>
</template>

<script>
// import LeftMenus from "@/views/components/TraceaLeftmenus";
// import SyVedio from "@/views/components/SyVedio";
// import { BASE_URL } from "@/utils/service.js";
// export default {
//   data() {
//     return {
//       aaa: "",
//       shopName: "",
//       curPage: 1,
//       BASE_URL,
//       pageSize: 10,
//       count: null,
//       text: "确认删除吗？\n若存在商品将禁止删除！",
//       dialogVisible: false,
//       dialogVisible1: false,
//       dialogVisible2: true,
//       addDetState: null,
//       companyForm: {},
//       brandForm: {},
//       tableData: [
//         {
//           id: 0,
//           date: "阿里巴巴",
//           name: "213543645756",
//           address: "上海市普陀区金沙江路 1518 弄",
//           qiye: "梅克尔树"
//         },
//         {
//           id: 1,
//           date: "亚马逊",
//           name: "2343台534542342341",
//           address: "辛苦了这绝对是大会看见爱上带回家",
//           qiye: ""
//         },
//         {
//           id: 2,
//           date: "快猫",
//           name: "ju67567567856756",
//           address: "发过火凤凰的东莞市",
//           qiye: "聂军"
//         }
//       ]
//     };
//   },
//   methods: {
//     parentFn(payload) {
//       alert(payload);
//     },
//     handleCurrentChange() {},
//     deletion() {},
//     handleAvatarSuccess(res, file) {
//       this.companyForm.imgurl = res.data.url;
//     },
//     beforeAvatarUpload(file) {
//       // 上传图片
//       const typeArr = ["image/jpeg", "image/png", "image/gif"];
//       const isLt2M = file.size / 1024 / 1024 < 1;
//       const typeType = typeArr.indexOf(file.type);
//       if (typeType < 0) {
//         this.$message.error("请选择JPG/PNG/GIF格式的图片!");
//       }
//       if (!isLt2M) {
//         this.$message.error("请选择不超过1MB的图片!");
//       }
//       return typeType >= 0 && isLt2M;
//     },
//     addDet(row) {
//       this.brandForm = {};
//       this.dialogVisible1 = true;
//       this.addDetState = row.id;
//       if (row != "-1") {
//         this.brandForm = row;
//       }
//     }
//   },
//   components: {
//     LeftMenus,
//     SyVedio
//   }
// };
</script>

<style lang="scss" scoped>
// .brand {
//   .exhibition {
//     display: flex;
//     justify-content: center;
//     background-color: rgba(0, 0, 0, 0.5);
//     .el-dialog {
//       margin: 0 25px 50px;
//       .el-dialog__header {
//         border-bottom: 1px solid #ddd;
//         .el-dialog__title {
//           font-weight: bold;
//         }
//       }
//       .el-dialog__body {
//         padding-top: 10px;
//         .confi-title {
//           display: flex;
//           justify-content: space-between;
//           font-size: 16px;
//         }
//         .confi-main {
//           border: 1px solid #ddd;
//           padding: 5px 1px;
//         }
//       }
//     }
//   }
//   display: flex;
//   justify-content: center;
//   .brand-main {
//     width: 960px;
//     padding: 20px;
//     background-color: rgba(248, 255, 255, 1);
//     .list {
//       margin-top: 35px;
//       background-color: #fff;
//       padding: 10px 15px;
//       .head {
//         display: flex;
//         justify-content: space-between;
//         .search {
//           cursor: pointer;
//         }
//         /deep/ .el-input {
//           width: 300px;
//         }
//         /deep/ .el-input__inner {
//           box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.24);
//           border: 1px solid rgba(255, 0, 0, 0);
//           border-radius: 0;
//         }
//         /deep/ .el-input__inner:focus {
//           border-color: #ddd;
//         }
//       }
//       .content {
//         margin-top: 25px;
//         .paging {
//           margin-top: 50px;
//         }
//       }
//     }
//   }
//   .enterprise {
//     margin-bottom: 10px;
//     p {
//       min-width: 70px;
//       line-height: 40px;
//       text-align: right;
//     }
//     width: 100%;
//     display: flex;
//     .contentFirst-img {
//       display: flex;
//       .upimg {
//         display: flex;
//         flex-direction: column;
//       }
//       /deep/ .avatar-uploader .el-upload {
//         border: 1px solid #d9d9d9;
//         cursor: pointer;
//         position: relative;
//         overflow: hidden;
//         background-color: rgba(0, 0, 0, 0.02);
//       }
//       /deep/ .avatar-uploader .el-upload:hover {
//         border-color: #76d4ce;
//       }
//       /deep/ .avatar-uploader-icon {
//         font-size: 28px;
//         color: #8c939d;
//         width: 104px;
//         height: 104px;
//         line-height: 84px;
//         text-align: center;
//         position: relative;
//         span {
//           font-size: 14px;
//           line-height: 20px;
//           width: 60px;
//           position: absolute;
//           top: 66px;
//           left: 23px;
//         }
//       }
//       /deep/ .avatar {
//         width: 104px;
//         height: 104px;
//         display: block;
//       }
//     }
//   }
//   .company {
//     /deep/ .el-dialog__footer {
//       text-align: center;
//       .el-button--primary {
//         background-color: #76d4ce;
//         border-color: #76d4ce;
//         color: #fff;
//       }
//       .el-button {
//         padding: 10px 30px;
//         width: 150px;
//       }
//       .el-button--default:focus,
//       .el-button--default:hover {
//         color: #76d4ce;
//         border-color: #76d4ce;
//         background-color: #ecf5ff;
//       }
//     }
//   }
//   .brandDia {
//     p {
//       margin: 15px 0;
//     }
//     /deep/ .el-dialog__body {
//       padding-top: 0;
//     }
//     /deep/ .el-input__inner {
//       line-height: 30px;
//       height: 30px;
//     }
//   }
// }
</style>